<template>
    <div class="rightTwo">
        <div class="item">
            <div class="charts">
                <div class="box">{{ props.info1 }}</div>
            </div>
            <div class="title">全市引进产业链关键配套项目</div>
        </div>
        <div class="item">
            <div class="charts" ref="chartsTwoRef"></div>
            <div class="title">完成全年目标</div>
        </div>
        <div class="item">
            <div class="charts" ref="chartsThreeRef"></div>
            <div class="title">总投资</div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive, nextTick,  markRaw, onBeforeUpdate } from 'vue'
import * as echarts from 'echarts';

const chartsTwoRef = ref()
const chartsThreeRef = ref()
const props = defineProps({
    info1: Number,
    info2: String,
    info3: String
})
const state = reactive({
    myCharts: [] as any,
    chartsTwoData: null as any,
    chartsThreeData: null as any,
})

const initChartsTwo = () => {
    state.chartsTwoData = markRaw(echarts.init(chartsTwoRef.value));
    let num = 0;
    const option = {
        title: [{
            text: props.info2 + '%',
            x: 'center',
            top: '42%',
            textStyle: {
                fontSize: '24',
                color: '#69FFE3',
                fontFamily: 'Lato',
                foontWeight: '400',
            },
        }],
        polar: {
            radius: ['44%', '90%'],
            center: ['50%', '50%'],
        },
        angleAxis: {
            max: 100,
            show: false,
        },
        radiusAxis: {
            type: 'category',
            show: true,
            axisLabel: {
                show: false,
            },
            axisLine: {
                show: false,

            },
            axisTick: {
                show: false
            },
        },
        series: [
            {
                name: '',
                type: 'bar',
                roundCap: true,
                barWidth: 10,
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(66, 66, 66, .3)',
                },
                data: [60],
                coordinateSystem: 'polar',

                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                            offset: 0,
                            color: '#69FFE3'
                        }, {
                            offset: 1,
                            color: '#69FFE3'
                        }]),
                    }
                }

            },
            {
                name: "",
                type: 'custom',
                coordinateSystem: "none",
                renderItem: function (params:any, api:any) {
                    console.log(params)
                    return {
                        type: 'arc',
                        shape: {
                            cx: api.getWidth() / 2,
                            cy: api.getHeight() / 2,
                            r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.545,
                            startAngle: (0 + num) * Math.PI / 180,
                            endAngle: (1 + num) * Math.PI / 180
                        },
                        style: {
                            stroke: "#69FFE3",
                            fill: "transparent",
                            lineWidth: 5
                        },
                        silent: true
                    };
                },
                data: [0]
            },
        ]
    };
    function numb() {
        num = num + 5
        state.chartsTwoData.setOption(option, true)
    }
    setInterval(function () {
        numb()
    }, 100);

    state.chartsTwoData.setOption(option);
    state.myCharts.push(state.chartsTwoData);
}
const initChartsThree = () => {
    state.chartsThreeData = markRaw(echarts.init(chartsThreeRef.value));
    const _pie2 = () => {
        let dataArr = [];
        for (var i = 0; i < 8; i++) {
            if (i % 2 === 0) {
                dataArr.push({
                    name: (i + 1).toString(),
                    value: 25,
                    itemStyle: {
                        normal: {
                            color: "rgba(88,142,197,0.5)",
                            borderWidth: 0,
                            borderColor: "rgba(0,0,0,0)"
                        }
                    }
                })
            } else {
                dataArr.push({
                    name: (i + 1).toString(),
                    value: 20,
                    itemStyle: {
                        normal: {
                            color: "rgba(0,0,0,0)",
                            borderWidth: 0,
                            borderColor: "rgba(0,0,0,0)"
                        }
                    }
                })
            }

        }
        return dataArr

    }

    const _pie3 = () => {
        let dataArr = [];
        for (var i = 0; i < 100; i++) {
            if (i % 2 === 0) {
                dataArr.push({
                    name: (i + 1).toString(),
                    value: 25,
                    itemStyle: {
                        normal: {
                            color: "#69FFE3",
                            borderWidth: 0,
                            borderColor: "rgba(0,0,0,0)"
                        }
                    }
                })
            } else {
                dataArr.push({
                    name: (i + 1).toString(),
                    value: 20,
                    itemStyle: {
                        normal: {
                            color: "rgba(0,0,0,0)",
                            borderWidth: 0,
                            borderColor: "rgba(0,0,0,0)"
                        }
                    }
                })
            }

        }
        return dataArr

    }

    const option = {
        title: {
            subtext: '亿元',
            left: 'center',
            top: 'center', //top待调整
            textStyle: {
                color: '#fff',
                fontSize: 30,

            },
            subtextStyle: {
                color: '#fff',
                fontSize: 14,

                top: 'center'
            },
            itemGap: 30 //主副标题间距
        },
        series: [
            {
                type: 'pie',
                zlevel: 2,
                silent: true,
                radius: ['90%', '91%'],
                startAngle: 50,
                hoverAnimation: false,
                // animation:false,    //charts3 no
                label: {
                    normal: {
                        show: false
                    },
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: _pie2()
            },
            {
                type: 'pie',
                zlevel: 3,
                silent: true,
                radius: ['88%', '87%'],
                label: {
                    normal: {
                        show: false
                    },
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: _pie2()
            },
            {
                type: 'pie',
                zlevel: 4,
                silent: true,
                radius: ['84%', '83%'],
                label: {
                    normal: {
                        show: false
                    },
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: _pie3()
            },
            {
                type: 'pie',
                zlevel: 5,
                silent: true,
                radius: ['80%', '78%'],
                color: ["#69FFE3", "#69FFE3", "rgba(203,203,203,.2)"],
                startAngle: 50,
                hoverAnimation: false,
                // animation:false,    //charts3 no
                label: {
                    normal: {
                        show: false
                    },
                },
                data: [50, 20, 40]
            },
            {
                name: '统计',
                type: 'gauge',
                splitNumber: 10, //刻度数量
                min: 0,
                max: 100,
                radius: '68%', //图表尺寸
                center: ['50%', '50%'],
                startAngle: 90,
                endAngle: -269.9999,
                axisLine: {
                    show: true,
                    lineStyle: {
                        width: 0,
                        shadowBlur: 0,
                        color: [
                            [0, '#0dc2fe'],
                            [1, '#0dc2fe']
                        ]
                    }
                },
                axisTick: {
                    show: true,
                    lineStyle: {
                        color: '#0dc2fe',
                        width: 2
                    },
                    length: 20,
                    splitNumber: 5
                },
                splitLine: {
                    show: true,
                    length: 20,
                    lineStyle: {
                        color: '#0dc2fe',
                    }
                },
                axisLabel: {
                    show: false
                },
                pointer: { //仪表盘指针
                    show: 0,
                },
                detail: {
                    borderColor: '#fff',
                    shadowColor: '#fff', //默认透明
                    shadowBlur: 2,
                    offsetCenter: [0, '0%'], // x, y，单位px
                    textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        color: '#fff',
                        fontSize: 28,
                    },
                    formatter: '{value}'
                },
                data: [{
                    name: "",
                    value: props.info3
                }]
            },

        ]
    };

    state.chartsThreeData.setOption(option);
    state.myCharts.push(state.chartsThreeData);
}


// 批量设置 echarts resize
const initEchartsResizeFun = () => {
    nextTick(() => {
        for (let i = 0; i < state.myCharts.length; i++) {
            setTimeout(() => {
                state.myCharts[i].resize();
            }, i * 1000);
        }
    });
};
// 批量设置 echarts resize
const initEchartsResize = () => {
    window.addEventListener('resize', initEchartsResizeFun);
};
// 页面加载时
onBeforeUpdate(() => {
    initChartsTwo()
    initChartsThree()
    initEchartsResize()
});
</script>

<style scoped lang="scss">
.rightTwo {
    display: flex;
    padding: 5px;
    height: calc(100% - 45px);
    justify-content: space-between;

    .item {
        width: 33%;
        display: flex;
        flex-direction: column;

        .charts {
            flex: 1;
            position: relative;

            .box {
                width: 80%;
                height: 50%;
                position: absolute;
                left: 50%;
                top: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
                color: #fff;
                font-size: 32px;
                transform: translate(-50%, -50%);
                background-image: url('@/assets/boder_bg.png');
                background-size: 100% 100%;
            }
        }

        .title {
            font-size: 18px;
            padding: 15px 0 20px;
            color: #AEBBC2;
            text-align: center;
        }
    }
}
</style>